<template>
  <el-form ref="form" :model="form" class="form" :rules="rules">
    <el-form-item class="form-item" prop="username">
      <el-input v-model="form.username" placeholder="用户名/手机号"></el-input>
    </el-form-item>
    <el-form-item class="form-item" prop="password">
      <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
    </el-form-item>
    <p class="form-text">
      <nuxt-link to="#">忘记密码</nuxt-link>
    </p>
    <el-form-item>
      <el-button type="primary" @click="handleLoginSubmit" class="submit">登陆</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
         // 表单数据
      form: {
          // 登录用户名/手机
        username: "",
        // 登录密码
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 11, message: "请输入长度在 3 到 11 个字符的用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "请输入长度在 3 到 18 个字符的密码", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleLoginSubmit() {
        // 验证表单格式正确，valid为true，格式不正确为false
        this.$refs.form.validate(async (valid) => {
            if (valid) {
              // try/catch里面的代码如果发生了错误，不会影响后面代码的执行
              // try是捕捉里面有没有代码有没有出现错误，出现错误后，里面代码不会执行
              try {
                await this.$store.dispatch('user/login',this.form)
                    // 这个函数返回是一个Promise，所以可以用await,设置为先走完promise这个函数再执行下面代码，把下面代码变成同步执行
                    // console.log(this.$store.dispatch('user/login',this.form));
                    // 跳转到首页
                    // this.$router.replace('/')
                    this.$router.back();
                     // 弹窗提示
                    this.$message.success('登录成功');
                    // 错误的话，可以在这处理，error返回的就是那个错误
              } catch (error) {
                // console.log(error)
                
              }
              // 是不影响这个代码后面执行
           
          } 
          
        });
    }
  }
};
</script>
<style lang="less" scoped>
.form {
  padding: 25px;
}
.form-item {
  margin-bottom: 20px;
}
.form-text {
  font-size: 12px;
  color: #409eff;
  text-align: right;
  line-height: 1px;
}
.submit {
  width: 100%;
  margin-top: 15px;
}
</style>